<template>
	<div class="content">
		<!-- <img class="base" src="../static/homeimg/share.png"></img> -->
        <img src="@/assets/homeimg/share.png" class="base" alt="">
		<div class="big">
            <div class="box">
			<!-- <div class="share" @click="goSharewx">
				邀请好友
			</div> -->
			<!-- <button class="share" type="default" open-type="share">邀请好友</button> -->
            <div class="share">立即邀请</div>
			<div class="top">
				邀请收益
			</div>
			<div class="inner"></div>
			<div class="main">
				<div class="rule" @click="goRule">
					规则说明
				</div>
                <div class="two">
                    <div class="red">
                        <div class="yuan">{{obj.rate_money || 0}}<text>元</text></div>
                        <div class="ke">累计收益</div>
                    </div>
                    <div class="red">
                        <div class="yuan">{{obj.money || 0}}<text>元</text></div>
                        <div class="ke">余额提现</div>
                    </div>
                </div>
                
			</div>
			<div class="bottom">
				<div class="left" @click="goShouyi">
					收益明细
				</div>
				<div class="line"></div>
				<div class="left" @click="goTixian">
					提现明细
				</div>
			</div>
		</div>
        </div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				userinfo: {},
				balance:'',
				obj:{}
			}
		},
		created(){
			window.scrollTo(0,0)
		},
		mounted() {
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token);
			}
			this.loadData()
		},
		methods:{
			loadData(){
				this.$http.post('/api/user/my_money').then(res => {
					// console.log(res)
					this.obj = res.data;
				})
			},
			goSharewx(){
				
			},
			goRule(){
				this.$router.push({path:'/rule'})
			},
			goTixian(){
				this.$router.push({path:'/tixian'})
			},
			goShouyi(){
				this.$router.push({path:'/shouyi'})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.base{
		// position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		// z-index: -100;
	}
	.share{
		position: absolute;
		width: 91vw;
		height: 14.666vw;
		background: linear-gradient(#fefcca, #fad056); 
		text-align: center;
		line-height: 14.666vw;
		font-size:15px;
		top: -6.75rem;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(249,111,28,1);
		border-radius: 20px;
	}
    .two{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
	.content{
		position: relative;
        min-height: 100vh;
        .big{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 25rem;
        }
		.box{
            // display: none;
			width:90vw;
			height:76.266vw;
			background:rgba(255,255,255,1);
			border-radius:33px;
			margin: 100vw auto 0;
            position: relative;
			// overflow: hidden;
			// border: 1px solid ;
			.inner{
				width: 100%;
				height: 3.4vw;
			}
			.top{
				width:54vw;
				height:8.6vw;
				background:rgba(114,116,253,1);
				border-radius:10px;
				position: absolute;
				top: -4.266vw;
				left: 18.266vw;
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height: 8.66vw;
				text-align: center;
			}
			.main{
				width:83.733vw;
				height:57.2vw;
				background:rgba(254,241,225,1);
				margin: 0 auto 0;
				padding: 5.33vw 5.33vw 0;
				box-sizing: border-box;
				.rule{
					font-size:15px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					text-align: right;
				}
				.yuan{
					font-size:50px;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(252,40,0,1);
					text-align: center;
					margin-top: 12vw;
					text{
						font-size: 18px;
					}
				}
				.ke{
					margin-top: .625rem;
					font-size:18px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(252,40,0,1);
					text-align: center;
				}
			}
			.bottom{
				width: 83.733vw;
				height: 15.6vw;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				padding: 0 8vw;
				box-sizing: border-box;
				.left{
					font-size:15px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
				.line{
					width:1px;
					height:1.25rem;
					background:rgba(205,205,205,1);
				}
			}
		}
	}
</style>
